<template>
	<div>
	  <HeaderNav :title="$t('m.headernav.MEET')" :showBack="false" />
	  <div class="Meet">
      <!-- 上墙置顶 -->
      <div class="wall_container">
        <div class="wall_item wall_item_add" @click="showWall">+</div>
       <router-link class="wall_item" v-for="(item, index) in wallList" :key="index" :to="`/userInfo?type=2&id=${item.id}`">
         <img :src='item.httpAvatar' width="100%" height="100%"/>
       </router-link>
      </div>
      <van-popup closeable v-model="dialogFlag" class="popup">
        <div>{{$t('m.msg.MSG99')}}</div>
        {{$t('m.msg.MSG101')}} {{wallPrice}} {{$t('m.msg.DIAMOND')}}
        <div class="popup_footer">
          <div @click="dialogFlag = false"  class="popup_btn">{{$t('m.msg.CANCEL_BTN')}}</div>
          <div type="primary" @click="toWall" class="popup_btn">{{$t('m.msg.OK_BTN')}}</div>
        </div>
      </van-popup>
	    <van-search :placeholder="$t('m.msg.MSG5')" v-model="name" v-on:input="onRefresh()"  />
     <!-- 子组件：{{chartOutlineIds}}{{chartOnlineIds}} -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        :finished-text="$t('m.msg.MSG6')"
        :error.sync="error"
        :error-text="$t('m.msg.MSG7')"
        @load="loadData"
      >
      <div class="contact_item" v-for="(item, index) in list" :key="index">
        <router-link class="contact_portrait"  :to="`/userInfo?type=2&id=${item.id}`">
          <img :src="item.httpAvatar" class="contact_portrait" />
        </router-link>
        <router-link class="contact_message"  :to="`/userInfo?type=2&id=${item.id}`">
          <div style='margin-right:10px'>
            <span class="contact_name"><span class="contact_isOnline"  :style="`color: ${item.isOnLine? 'rgb(6, 138, 87)' : '#a1a1a1'}`">● </span>{{item.name}}</span>
            <div class="contact_age">{{item.age}}{{$t('m.msg.AGE')}}</div>
          </div>
          <van-icon v-if="item.grade == 'blueDiamond'" name="gem-o" info="vip" color="#2161A1" size="30px" />
           <van-icon v-if="item.grade == 'anCrown'" name="bulb-o" info="vip" color= "#91A121" size="30px" />
        </router-link>

        <router-link :to="`/chatIndex?id=${item.id}`">
          <van-icon name="chat" size="40px" color="#00a0e9" class="contact_chat"  />
        </router-link>
        <router-link :to="`/sendGift?memberId=${item.id}`">
          <van-icon name="gift" size="40px" color="#00a0e9" class="contact_gift" />
        </router-link>
        
      </div>
      </van-list>
      </van-pull-refresh>
	    <Footer :active="0" :chartFlag="chartFlag" />
	  </div>
	</div>
</template>

<script>
  import {
    Search,
    Icon,
    Tabbar,
    TabbarItem,
    List,
    PullRefresh,
    Popup 
  } from 'vant';
  import HeaderNav from '@/components/HeaderNav.vue'
  import Footer from '@/components/Footer.vue'
  import {postQuery, getQuery} from '@/api/query';
  // let objlist = []
  export default {
    name: 'Meet',
    data() {
      return {
        name: "",
        page: 1,
        list:[],
        pages: 0,
        loading: false,
        error: false,
        finished: false,
        refreshing: false,
        wallList: [],
        dialogFlag: false,
        wallPrice: 0
      }
    },
    components: {
      [Search.name]: Search,
      [Icon.name]: Icon,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [PullRefresh.name]: PullRefresh,
      [Popup.name]: Popup,
      HeaderNav,
      Footer
    },
    props: {
      chartFlag: Boolean,
      chartOutlineIds: Array,
      chartOnlineIds: Array
    },
    created(){
      let that = this;
      that.getWallList();
      that.chartFlag = that.$parent.$data.chartFlag
      // setInterval(function () {
      //   that.onRefresh();
      // }, 5000);
      that.chartOutlineIds = that.$parent.$data.chartOutlineIds
      that.chartOnlineIds = that.$parent.$data.chartOnlineIds
    },
    watch: {
      
      //改变上线下线状态
        chartOutlineIds(newVal){
          let that = this
          for(let i = 0; i < that.list.length; i ++){
            for(let j = 0; j < newVal.length; j ++){
              if(newVal[j] == that.list[i].id){
                that.list[i].isOnLine = false
              }
            }
          }
          // that.$parent.$data.chartOutlineIds = [];
        },
        chartOnlineIds(newVal){
          let that = this
          for(let i = 0; i < that.list.length; i ++){
            for(let j = 0; j < newVal.length; j ++){
              if(newVal[j] == that.list[i].id){
                that.list[i].isOnLine = true
              }
            }
          }
          // that.$parent.$data.chartOnlineIds = [];
            // this.fullname = this.firstname + '-' + newVal
        }
    },
    methods:{
//       getColor(item){
//         let that = this;
//         obj = item;
// // // :style="`color: ${item.isOnLine && out. ? 'rgb(6, 138, 87)' : '#a1a1a1'} `"

//         for(let i = 0; i < that.chartOutlineIds.length; i ++){
//           if(that.chartOutlineIds[i] == obj.id){
//             // console.log(item.id,item.name)
//             obj.isOnLine = false;
//           }
//         }
// //         that.$parent.$data.chartOutlineIds = [];
//         for(let i = 0; i < that.chartOnlineIds.length; i ++){
//           if(that.chartOnlineIds[i] == obj.id){
//             // console.log(item.id,item.name)
//             obj.isOnLine = true;
//           }
//         }
// //         that.$parent.$data.chartOnlineIds = [];
//         // alert(item.isOnLine+','+this.list.length)
//         return obj.isOnLine ? 'color: rgb(6, 138, 87)' : 'color: #a1a1a1';
//       },
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        //初始化
        this.pages = 0;
        this.list = [];
        this.page = 1;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.loadData();

      },
      loadData(){
        var that = this;
        if(that.pages > 0 && that.page > that.pages){
          that.finished = true;
        }
        let params = {
          page: that.page
        }
        if(that.name){
          params.name = that.name;
        }
        getQuery('/memaber/list/page', params)
          .then (res => {
            if(res.code == 200){
              //是否加载完成finished
              // if(res.data.records.length < 10){
              //   that.finished = true;
              // }
              if(res.data.pages>0&&res.data.current>=res.data.pages){
                that.finished = true;
              }
              that.list = that.list.concat(res.data.records)
              // = res.data.records;
              that.pages = res.data.pages;
              that.page ++;
              that.loading = false;
              that.refreshing = false;
            }else{
              that.$toast.fail(res.msg);
              that.finished = true;
            }
        }).catch(function (error) {
          that.error = true;     
        });
      },
      //查询上墙
      getWallList(){
        var that = this;
        getQuery('/memaber/list/recommend')
          .then (res => {
            if(res.code == 200){
              console.log('上墙数据：',res)
              that.wallList = res.data
            }else{
              that.$toast.fail(res.msg);
            }
        })
      },

      //查询上墙所需金币
      showWall(){
        var that = this;
        that.dialogFlag = true
        getQuery('/memaber/list/goldNumber')
          .then (res => {
            if(res.code == 200){
              that.wallPrice = res.data
            }else{
              that.$toast.fail(res.msg);
            }
        })
      },
      //花费上墙
      toWall(){
        var that = this
        postQuery('/memaber/list/add/recommend')
          .then (res => {
            if(res.code == 200){
              that.$toast.success(that.$i18n.t('m.msg.MSG100'));
              that.getWallList();
            }else{
              that.$toast.fail(res.msg);
            }
        })
        that.dialogFlag = false
      }
      //接收消息
      // 发送和接收消息
      // handdleMsg() {
      //   let that = this;
      //   console.log('meet:',that.ws)
      //   return
      //   that.ws.onmessage = that.getMessage;
      // },
      // getMessage(msg) {
      //     console.log(msg)
      //     if(msg){
      //         let res = JSON.parse(msg.data).content;
      //         console.log(JSON.parse(res))
      //     }
      // }

    }
  }
</script>
<style scoped>
  /*.Meet {
    width: 100%;
    height: 100%;
    background-color: #9ae1f3;
  }*/
  .popup{
    width: 70vw;
    /* height: 30vh; */
    text-align: center;
    font-size: 32px;
     color: #a1a1a1; 
    padding: 5vh 0 20px 0;
  }
  .popup_footer{
    display: flex;
    margin-top: 10%;
    justify-content:space-between;
    width: 60%;
    margin-left: 20%;
  }

  .popup_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: #ff7300;
    color: white;
    font-size: 20px;
    height: 60px;
    width: 100px;
  }
  .wall_container{
    height: 12vh;
    width: 95vw;
    display: flex;
    overflow-x:auto;
    align-items: center;
    padding-right: 30px;
  }

  .wall_container::-webkit-scrollbar{
    display: none;/*去掉滚动条 */
  }
  
  .wall_item{
    height: 10vh;
    width: 10vh;
    margin-left: 30px;
    flex-grow:0;
    flex-shrink:0;
  }

  .wall_item_add{
    font-size: 130px;
    font-weight: 1;
    color:#a1a1a1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px #a1a1a1 solid;
  }
  .van-list{
    margin-bottom: 7vh;
  }

  .contact_item {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;

  }

  .contact_portrait {
    width: 110px;
    height: 100px;
    margin: 0px 20px;
    border-radius: 50%;
    overflow: hidden;
  }

  .contact_message {
    width: 430px;
    height: 100px;
    line-height: 50px;
    display: flex;
    
  }

  .contact_isOnline {
   
    font-weight: bold;

  }

  .contact_name {
    font-weight: bold;
    font-size: 28px;
    color: black;
  }

  .contact_age{
    font-size: 24px;
    color:#a1a1a1;
  }

  .contact_chat {
    margin-left: auto;
  }

  .contact_gift {
    margin-right: 20px;
  }
</style>